﻿@page "/frogsoft/login"
@model FluentAdmin.Pages.LoginModel
@{
}


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.108.0">
    <title>FlunetAdmin-Login</title>

    <link href="~/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <!-- Custom styles for this template -->
    <link href="~/bootstrap/login.css" rel="stylesheet" />
    <script src="~/bootstrap/bootstrap.bundle.min.js"></script>    
    <script type="text/javascript"> 
        function login() {
            console.log('do login ...');            
            const form = document.querySelector('form');
            const formData = new FormData(form);
            for (let [key, value] of formData.entries()) {
                console.log(key, value);
            }
            fetch('/frogsoft/api/account/login?useCookies=true&useSessionCookies=true', {
                method: 'POST',
                headers: {
                    'accept': 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    "Email": formData.get("username"),
                    "Password": formData.get("password")
                })
            })
                .then(response => {
                    if (response.status == 200) {
                        window.location.href = "/";
                    }
                    else {
                        throw new Error(`HTTP 错误！状态码: ${response.status}`);                        
                    }
                })
                .then(data => {
                    if (data) {
                        console.log("postJson.data:", data);
                    };
                }
                )
                .catch(error => {
                    console.error('Error:', error);
                    const toastLiveExample = document.getElementById('liveToast');
                    const toast = new bootstrap.Toast(toastLiveExample);
                    toast.show();
                });
        };

        window.onload = () => {
            console.log('页面所有资源加载完成');
            const usernameInput = document.querySelector('input[name="username"]');
            const passwordInput = document.querySelector('input[name="password"]');

            // 给它们赋值
            usernameInput.value = 'admin';
            passwordInput.value = 'Admin12345.';
        };
    </script>
</head>
<body class="text-center">

    <main class="form-signin w-100 m-auto">
        <form>
            <img class="mb-4" src="~/bootstrap/bootstrap-logo.svg" alt="" width="72" height="57">
            <h1 class="h3 mb-3 fw-normal">欢迎使用</h1>

            <div class="form-floating">
                <input type="email" name="username" class="form-control" placeholder="name@example.com">
                <label for="floatingInput">账号</label>
            </div>
            <div class="form-floating">
                <input type="password" name="password" class="form-control" placeholder="Password">
                <label for="floatingPassword">密码</label>
            </div>

            <div class="checkbox mb-3">
                <label>
                    <input type="checkbox" value="remember-me"> 记住账号
                </label>
            </div>
            <button type="button" class="w-100 btn btn-lg btn-primary" onclick="login()">登录</button>
            <p class="mt-5 mb-3 text-muted">&copy; 2024–2025</p>
        </form>
    </main>
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <img src="..." class="rounded me-2" alt="...">
                <strong class="me-auto">Bootstrap</strong>
                <small>11 mins ago</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                Hello, world! This is a toast message.
            </div>
        </div>
    </div>
</body>
</html>
